﻿@{
    ViewBag.Title = "QuickIntro";
}

<h2>Quick Introduction</h2>

<p>If you want quickly get idea if the library is useful for you, go thought the five examples</p>

<h3>ViewModel sample</h3>

<p>First, you can see source code of typical ViewModel (C# classes)</p>

<div class="code">
<span class="Modifier">public</span>&nbsp;<span class="ReferenceType">class</span>&nbsp;Location&nbsp;:&nbsp;BaseKoViewModel&nbsp;<span class="InlineComment">//&nbsp;you&nbsp;may&nbsp;inherit&nbsp;from&nbsp;BaseKoViewModel&nbsp;class&nbsp;to&nbsp;benefit&nbsp;from&nbsp;helper&nbsp;methods</span><br />
{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[DisplayName(<span class="String">"Name&nbsp;of&nbsp;the&nbsp;city"</span>)]<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[StringLength(256)]<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Modifier">public</span>&nbsp;<span class="ReferenceType">string</span>&nbsp;City&nbsp;{&nbsp;get;&nbsp;set;&nbsp;}<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Required]<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Modifier">public</span>&nbsp;Coords&nbsp;Coords&nbsp;{&nbsp;get;&nbsp;set;&nbsp;}<br />
}<br />
<br />
<span class="Modifier">public</span>&nbsp;<span class="ReferenceType">class</span>&nbsp;Coords<br />
{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Range(-90,&nbsp;90)]<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Modifier">public</span>&nbsp;<span class="ValueType">double</span>&nbsp;Latitude&nbsp;{&nbsp;get;&nbsp;set;}<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Range(-180,&nbsp;180)]<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Modifier">public</span>&nbsp;<span class="ValueType">double</span>&nbsp;Longitude&nbsp;{&nbsp;get;&nbsp;set;&nbsp;}<br />
}
</div>

<h3>1. Generate JavaScript ViewModel from C# class</h3>
<p>The first step is to include model definition on the top of your view page.</p>
<p>If you use a model that inherits from helper class "BaseKoViewModel", then the second step is to view model declaration section using ApplyBindingsScript method.</p>

<p>Source code</p>

<div class="code">
&#64;model&nbsp;People&nbsp;<span class="InlineComment">//&nbsp;specifying&nbsp;model's&nbsp;type&nbsp;on&nbsp;the&nbsp;top&nbsp;of&nbsp;View&nbsp;page</span><br />
<br />
...<br />
<br />
&#64;Model.ApplyBindingsScript(KoBindingOptions.IncludeData)&nbsp;<span class="InlineComment">//&nbsp;include&nbsp;JavaScript&nbsp;model&nbsp;definition&nbsp;and&nbsp;data</span>
</div>

<p>If you prefer not to use the "BaseKoViewModel" base class, then you can achieve similar effect using help method.</p>

<p>Source code</p>
<div>

</div>

<p>Benefits:</p>
<ul>
    <li>You define view model only once and it is used in both C# and JavaScript parts or the code</li>
    <li>In case of updates no need to synchronize versions</li>
    <li>C# class definitions allows to include extra infromation via attributes that could be used in javascript, for validation, formatting and etc.</li>
    <li>If code generation is used, then many of operations and UI controls and forms are generated for you at no extra cost</li>
</ul>

<h3>2. Foreach</h3>

<p>The foreach binding duplicates a section of markup for each entry in an array, and binds each copy of that markup to the corresponding array item.</p>

<p>Source code</p>
<div class="code">
&lt;table&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;thead&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;&lt;th&gt;First&nbsp;name&lt;/th&gt;&lt;th&gt;Last&nbsp;name&lt;/th&gt;&lt;/tr&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/thead&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;tbody&gt;<br />
&#64;<span class="Namespace">using</span>(<span class="Linq">var</span>&nbsp;item&nbsp;=&nbsp;Html.KoForeach(m&nbsp;=&gt;&nbsp;m.people))<br />
{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&nbsp;&#64;Html.KoAttrText(m&nbsp;=&gt;&nbsp;item.Value.firstName)&gt;&lt;/td&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&nbsp;&#64;Html.KoAttrText(m&nbsp;=&gt;&nbsp;item.Value.lastName)&gt;&lt;/td&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;<br />
}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tbody&gt;<br />
&lt;/table&gt;</div>

<p>Benefits:</p>

<ul>
    <li>Writing C# code in cshtml file allows you to make sure that errors are found on compile time</li>
    <li>Type validation ensures that you use foreach methods only with IEnumerable types</li>
</ul>

<h3>3. Templates</h3>

<p>The template binding populates the associated DOM element with the results of rendering a template. Templates are a simple and convenient way to build sophisticated UI structures.</p>

<h5>Defining a template</h5>
<p>Source code of inlcude template statement</p>

<div class="code">
&#64;(Html.KoIncludeTemplate&lt;Account&gt;(KnockoutTemplatesPartials.PERSON_TEMPLATE))
</div>

<p>Sample of template source code (partial view PersonTemplate.cshtml)</p>

<div class="code">
&#64;model&nbsp;Account<br />
<br />
&lt;h5&nbsp;&#64;Html.KoAttrText(model&nbsp;=&gt;&nbsp;model.Name)&gt;&lt;/h5&gt;<br />
&lt;p&gt;Credits:&nbsp;&lt;span&nbsp;&#64;Html.KoAttrText(model&nbsp;=&gt;&nbsp;model.Credits)&gt;&lt;/span&gt;&lt;/p&gt;
</div>

<h5>Using a template</h5>

<p>Source code of using a template</p>

<div class="code">
&lt;div&nbsp;&#64;Html.KoAttrTemplate(model&nbsp;=&gt;&nbsp;model.Seller,&nbsp;KnockoutTemplatesPartials.PERSON_TEMPLATE)&gt;&lt;/div&gt;
</div>

<p>or sample for "foreach" template</p>
<div class="code">
&lt;div&nbsp;&#64;Html.KoAttrTemplateForeach(model&nbsp;=&gt;&nbsp;model.Accounts,&nbsp;KnockoutTemplatesPartials.PERSON_TEMPLATE)&gt;&lt;/div&gt;
</div>

<p>Benefits:</p>

<ul>
    <li>Strong typing in a template</li>
    <li>All extra formating is done automatically (including "script" tags, ids and etc.)</li>
</ul>

<h3>4. Attributes</h3>

<p>The attribute binding provides a way to set the values of attributes for the associated DOM element.</p>

<p>Source code</p>
<div class="code">
&lt;p&gt;Profit&nbsp;(negative&nbsp;is&nbsp;red,&nbsp;more&nbsp;than&nbsp;10&nbsp;is&nbsp;green,&nbsp;less&nbsp;than&nbsp;-10&nbsp;or&nbsp;more&nbsp;100&nbsp;is&nbsp;bold):&nbsp;<br />
&lt;span&nbsp;&#64;Html.KoAttrText(model&nbsp;=&gt;&nbsp;model.Profit)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.KoAttrVisible(model&nbsp;=&gt;&nbsp;model.Profit&nbsp;&gt;&nbsp;-1000)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.KoAttrCSS(<span class="String">"goodProfit"</span>,&nbsp;model&nbsp;=&gt;&nbsp;model.Profit&nbsp;&gt;&nbsp;10)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.KoAttrStyle(<span class="String">"color"</span>,&nbsp;model&nbsp;=&gt;&nbsp;model.Profit&nbsp;&gt;&nbsp;10&nbsp;?&nbsp;<span class="String">"green"</span>&nbsp;:&nbsp;(m.Profit&nbsp;&lt;&nbsp;0&nbsp;?&nbsp;<span class="String">"red"</span>&nbsp;:&nbsp;<span class="String">"black"</span>&nbsp;))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.KoAttrStyle(<span class="String">"font-weight"</span>,&nbsp;model&nbsp;=&gt;&nbsp;model.Profit&nbsp;&lt;&nbsp;-10&nbsp;||&nbsp;m.Profit&nbsp;&gt;&nbsp;100&nbsp;?&nbsp;<span class="String">"bold"</span>&nbsp;:&nbsp;<span class="String">"normal"</span>)&gt;
<br />&lt;/span&gt;&lt;/p&gt;
</div>

<p>Benefits:</p>

<ul>
    <li>Using C# in attribute's expressions, especially conditional statements. It allows validate correctness of the expression on a compile time</li>
    <li>Automatic generation javascript from the C# expressions</li>
    <li>Chain multiple attributes with each other or with a parent method</li>
</ul>

<h3>5. Code Generation</h3>

<p>Code generation allows to minimize duplication of work by using source information and build necessary classes, constants and attributes.</p>

<ul>
    <li>Generate view models from entity framework model or xml file</li>
    <li>Generate view of controller's actions for create, read, update, delete and search operations based on view model</li>
    <li>Generate file names of partial views</li>
</ul>

<p>Benefits:</p>

<ul>
    <li>In many cases database is a primary source of data and object structures, view model and controller's action could be automatically generation base on the data and relationship between the data</li>
    <li>Database fields contain information of constrained, like: is it required, maximum string length and etc.</li>
    <li>There are information about primary and foreign keys that allows to autogenerate </li>
</ul>

<p>&nbsp;</p>
<p>Next &gt; @Html.ActionLink("Foreach", "Foreach", "Examples")</p>